react-native-calendars 逆引き

#ReactNative #zenn投稿済

ReactNativeでカレンダーを実装したいなら、react-native-calendarsを利用するといい

この記事ではカレンダー実装でよくある要求とその実装方法を記載していく

公式ドキュメントはこちら

インストール

最低限の利用方法

要求1. カレンダーのコンテナ（大枠）を装飾する

要求2. カレンダーの中身を縦に伸ばす

要求3. カレンダーが常に6行表示になるようにする

要求4. 表記を日本語化する

要求5：矢印を消したい

要求6：横スワイプを可能にしたい

要求7：日ごとの中身をカスタムしたい

インストール

$ yarn add react-native-calendars

最低限の利用法

https://scrapbox.io/files/629108a930a2d00023d8cded.png

<Calendar />をシンプルに利用するだけでOK

code: App.js

import React from 'react';

import {SafeAreaView} from 'react-native';

import { Calendar } from 'react-native-calendars';

export default function App() {

return (

</SafeAreaView>

)

}

要求1. カレンダーのコンテナ（大枠）を装飾する

https://scrapbox.io/files/629109a12c266d001ddd484d.png

カレンダーの大枠を装飾したいならstyleプロパティを利用するといい

参考：Calendar | RNC

code: App.js

import React from 'react';

import {SafeAreaView} from 'react-native';

import { Calendar } from 'react-native-calendars';

export default function App() {

return (

<Calendar

style = {{

background: 'red',

heigth: '100%'

}}

</SafeAreaView>

)

}

要求2. カレンダーの中身を縦に伸ばす

https://scrapbox.io/files/62910b4dd7c84d0023224cab.png

themeプロパティを使って、カレンダーの中身（週、日表示）の装飾を変更できる

この装飾を利用して、カレンダーの中身を縦に伸ばす

stylesheet.calendar.mainという属性の中に、更に決まった属性が存在することに注意。

参考：Can't change height of calendar to fullScreen · Issue #638 · wix/react-native-calendars

code: App.js

import React from 'react';

import {SafeAreaView} from 'react-native';

import { Calendar } from 'react-native-calendars';

export default function App() {

return (

<Calendar

style = {{

height: '100%'

}}

theme = {{

'stylesheet.calendar.main': {

monthView: {

flex: 1,

height: '100%',

justifyContent: 'space-around'

week: {

flex: 1,

marginVertical: 0,

flexDirection: 'row',

justifyContent: 'space-around'

dayContainer: {

borderColor: '#f5f5f5',

borderWidth: 1,

flex:1,

}

}}

</SafeAreaView>

)

}

要求3. カレンダーが常に6行表示になるようにする

https://scrapbox.io/files/62910db1a76e2a002356a08d.png

showSixWeeksプロパティを使うだけ

code: App.js

import React from 'react';

import {SafeAreaView} from 'react-native';

import { Calendar } from 'react-native-calendars';

export default function App() {

return (

<Calendar

showSixWeeks

style = {{

backgroundColor: 'red',

}}

</SafeAreaView>

)

}

要求4. 表記を日本語化する

https://scrapbox.io/files/629c4d7aa74b9a0023e3a66f.png

LocalConfig.defaultLocaleの値を日本語仕様に変更する必要がある。

<Calendar />と同じファイルで設定してあげれば綺麗。

参考：react-native-calendarsの日本語化とカスタム方法 | てぐらる's ブログ

code: App.js

import React from 'react';

import {SafeAreaView} from 'react-native';

import { Calendar, LocaleConfig } from 'react-native-calendars';

export default function App() {

return (

<Calendar

showSixWeeks

style = {{

backgroundColor: 'red',

}}

</SafeAreaView>

)

}

LocaleConfig.locales.jp = {

monthNames: '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月',

monthNamesShort: '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月',

dayNames: '日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日',

dayNamesShort: '日', '月', '火', '水', '木', '金', '土',

};

LocaleConfig.defaultLocale = 'jp';

要求5：矢印を消したい

https://scrapbox.io/files/629c4e5c4f5eb4001db30ee2.png

hideArrowsオプションをCalendarに付与すればいい

参考：Calendar | RNC

要求7：横スワイプを可能にしたい

enableSwipeMonthsオプションをCalendarに付与すればいい

参考：Calendar | RNC

要求8：日ごとの中身をカスタムしたい

https://scrapbox.io/files/629c4f7dbda8ce001d3ab863.png

dayComponentオプションに、props.date, props.stateを引数として受け取るコンポーネントを与える。

こうすると、日ごとの文字サイズ、その他の中身を変えれたり、更に特定の日だけ別の装飾にすることも可能。

code: App.js

import React from 'react';

import {SafeAreaView, View, Text} from 'react-native';

import { Calendar } from 'react-native-calendars';

import { NativeBaseProvider } from 'native-base';

export default function App() {

return (

<Calendar

hideArrows

dayComponent={({date, state}) => {return <View><Text style={{color: 'red'}}>{date.day}</Text></View>}}

</SafeAreaView>

</NativeBaseProvider>

)

}

参考

公式ドキュメント：Hello from RNC | RNC

react-native-calendarsの日本語化とカスタム方法 | てぐらる's ブログ

github：wix/react-native-calendars: React Native Calendar Components 🗓️ 📆